.upload-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: $border-radius-lg;
  border: 1px dashed $border-color;
  background-color: $light;
  padding: 0.5rem;
  cursor: pointer;
  color: $gray-500;

  transition-property: background-color, border-color, color;
  transition-duration: 0.5s;
  transition-timing-function: ease;

  &:hover {
    background-color: $action;
    border-color: rgba($blue, 0.25);
    color: rgba($primary, 0.75);

    .text-muted {
      color: rgba($primary, 0.5) !important;
    }
  }

  &:active {
    background-color: $action;
    border-color: rgba($blue, 0.5);
    box-shadow: 0 0 0 2px $white, 0 0 0 4px $blue !important;
  }
}

.media-form {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 0.5rem;
  width: 100%;
  height: 100%;
  user-select: none;

  &__add-button {
    aspect-ratio: 1/1;

    &:only-child {
      grid-column: 1 / span 6;
      grid-row: 1 / span 1;
      aspect-ratio: 12/1;
      max-width: 200px;
      height: 200px;
    }

    &:not(:only-child) {
      height: 100% !important;
    }
  }

  &__image {
    padding: 0.5rem;
    border: none;
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: $border-radius;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
    transition-property: box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    box-shadow: rgba(209, 217, 224, 0.5) 0px 0px 0px 1px;

    & img {
      top: 0;
      left: 0;
    }

    & .move-handle {
      z-index: 2;
      color: white;
    }

    .custom-checkbox:has(input:checked) {
      display: inline !important;
    }

    &:hover {
      .custom-checkbox {
        display: inline !important;
      }
      .move-handle {
        display: inline !important;
      }

      box-shadow: rgba(209, 217, 224, 0.8) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 3px 6px -3px, rgba(37, 41, 46, 0.12) 0px 2px 6px 0px !important;
    }

    &:has(input:checked) {
      box-shadow: 0 0 0 2px $blue !important;
    }

    &:first-of-type {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
    }
  }
}
